import React, { Component } from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入折线图
import  'echarts/lib/chart/line';
import "echarts/lib/component/title"; // 此处是按需引入
import 'echarts/lib/component/grid'
import "echarts/lib/component/tooltip";
import ReactEcharts from "echarts-for-react";
export default class LineEcharts extends Component {
    constructor(props) {
        super(props);
        //react定义数据
        this.state = {    

        }
    }
    // getOption 这个函数主要用于配置 option，包括将数据配置进去
    // 也可以将其放在 state 中，然后通过 setState 更新
    getOption = () => {
        const {title,xName,yName,xData,yData} = this.props
        return{
            title: {
                text: title || "标题",
                x: 'center',
            },
            tooltip: {
                trigger: "axis",
                // axisPointer: {
                //     type: 'cross',
                //     label: {
                //       backgroundColor: '#6a7985'
                //     }
                // }
            },
            //图例
            legend: {
                orient: 'vertical', //图例方向
                itemHeight: 10,     //图例高度
                itemWidth: 10,      //图例宽度
                icon:'rect',        //图例样式
                right:100,          
                // data: ["清分量", "关联量"],
            },
            //保存图表图片
            toolbox: {
                feature: {
                    saveAsImage: {},
                    magicType: { show: true, type: ['line', 'bar'] },
                }
            },
            xAxis: {
                boundaryGap: false,// 刻度离纵轴有无间隙，默认true有间距
                type: 'category',
                name: xName || "X轴坐标",
                axisLabel : {//坐标轴刻度标签的相关设置。
                    // clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里
                    interval: 0,
                    rotate: 90,// 文字倾斜度
                },
                nameTextStyle: {// 名称样式
                    fontSize: 20,
                    color:'#000000',
                    fontWeight: 'bold'
                },
                data:xData,
                splitNumber:200,
                splitLine: {show: false},// 显示隐藏刻度线
            },
            yAxis: {
                axisLine:{
                    show: true, //显示y轴
                },
                type: 'value',
                name: yName || "Y轴坐标",
                nameTextStyle: {// 名称样式
                    fontSize: 20,
                    color:'#000000',
                    fontWeight: 'bold'
                },
                splitLine: {show: false},// 显示隐藏刻度线
            },
            series: yData
        }
    };
    render() {
        return (
            <ReactEcharts
                style={{ minHeight: "400px"}}
                option={this.getOption()}
                notMerge
                lazyUpdate
                theme={"theme_name"}
                // onChartReady={this.onChartReadyCallback}
                // onEvents={EventsDict}
            />
        )
    }
}